<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/ajax.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <!--<script src="js/myAjax.js"></script>-->
    <script src="js/MyAjax2.js"></script>
</head>
    <div class="container">
        <div class="row">
            <div class="col-md-4"></div>
            <div class="col-md-4">
                <div class="input-group input-group-md">
                    <div class="form-div">
                        <input type="text" class="form-control" placeholder="uname" name="uname" >
                        <input type="number" class="form-control" placeholder="age" name="age">
                        <input type="radio" name="sex" value="true" class="sex-input" checked="checked"/>男  <input type="radio" name="sex" value="false" class="sex-input"/>女
                        <input type="number" class="form-control" placeholder="sal" name="sal">
                        <input type="date" class="form-control" placeholder="birth" name="birth">
                    </div>
                    <div id="add-div">
                        <div class="col-md-3"></div> <button class="btn btn-primary btn-lg" id="add">add user</button>
                    </div>
                </div>
            </div>
            <div class="col-md-4"></div>
        </div>
        <div class="row">
            <div class="col-md-5"></div>
            <div class="col-md-2"><h2>user list</h2></div>
            <div class="col-md-5"></div>
        </div>
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-10">
                    <table id="user_list" class="table">
                        <thead>
                        <tr>
                            <th>id</th>
                            <th>uname</th>
                            <th>sex</th>
                            <th>age</th>
                            <th>sal</th>
                            <th>birth</th>
                            <th>delete</th>
                            <th>update</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
                <div class="col-md-1"></div>
            </div>

    </div>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    <div class="form-div">
                        <input type="text" class="form-control" placeholder="uname" name="updateId" readonly>
                        <input type="text" class="form-control" placeholder="uname" name="updateUname" >
                        <input type="number" class="form-control" placeholder="age" name="updateAge">
                        <input type="radio" name="updateSex" value="true" class="sex-input">男  <input type="radio" name="updateSex" value="false" class="sex-input">女
                        <input type="number" class="form-control" placeholder="sal" name="updateSal">
                        <input type="date" class="form-control" placeholder="birth" name="updateBirth">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="updateUser">Save changes</button>
                </div>
            </div>
        </div>
    </div>



<body>
<script src="js/user2.js"></script>
</body>
</html>